import React,{Component} from  'react'
import { Form, Input, Select, Button } from 'antd';
import './productCategory.less'
import {getCategory,addCategory} from "../../redux/productCategory.redux";
import {connect} from 'react-redux'

const FormItem = Form.Item;
const Option = Select.Option;


class AddCategory extends Component{
    constructor(props){
        super(props);
        this.state = {
            parentId:0,
            categoryName:''
        }
    }

    componentDidMount() {
        this.props.getCategory(0);
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                 this.props.addCategory(values)
                console.log('Received values of form: ', values);
            }
        });
    }

    handleSelectChange(){
    }
    render(){
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        return (
            <div>
                <div className='productCategory'>
                    <h1 className='page-header'>品类管理 -- 添加品类</h1>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="所属品类"
                        >
                            {getFieldDecorator('parentId', {
                                initialValue: 0,
                                rules: [{ required: true, message: '请选择父品类' }],
                            })(
                                <Select
                                    placeholder="请选择父品类"
                                    onChange={this.handleSelectChange}
                                >
                                    {
                                        this.props.category.data.map(obj=>{
                                            return (  <Option  key={obj.id} value={obj.id}>{obj.name}</Option>)
                                        })
                                    }
                                </Select>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="品类名称"
                        >
                            {getFieldDecorator('categoryName', {
                                rules: [{ required: true, message: '请输入品类名称' }],
                            })(
                                    <Input   placeholder="请输入品类名称"  onChange={this.handleSelectChange}/>
                            )}
                        </FormItem>
                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">保存</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        )
    }
}

const WrappedAddForm = Form.create()(AddCategory);

function mapStateToProps(state){

    let newList = []
    let item = {
        id:0,
        name: "/所有"
    }
    newList.push(item)
    for(let item of state.category.data){
        let name = `/所有/${item.name}`
      let newItem =  {...item, name :name}
      newList.push(newItem)
    }
    return {
        ...state,
        category:{
            data:newList
        }
    };
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    getCategory: (category) => {
        dispatch(getCategory(category))
    },
    addCategory:(data) => {
        dispatch(addCategory(data))
    },
} )
export default connect(mapStateToProps, mapDispatchToProps)(WrappedAddForm);

